<template>
 <div class="result flex jm-bg-color">获取{{ leftList1.length }}条匹配结果</div>
 <div class="ip-list">
    <div class="ip-item jm-bg-color"  v-for="(item, index) in leftList1" :key="index">
      <div class="left">
        <div class="title">
          <span class="color">{{ item.id }}</span>
        </div>
        <div class="desc">
          <jm-icon class="icon"><Location /></jm-icon>
          <span class="desc-title">位置: </span>
          <span>{{ item.location }}</span>
        </div>
        <div class="desc">
          <jm-icon class="icon"><Aim /></jm-icon>
          <span class="desc-title">类型: </span>
          <span>{{ item.deviceInformation.secondaryType }}</span>
        </div>
        <div class="desc">
          <jm-icon class="icon"><Clock /></jm-icon>
          <span class="desc-title">更新时间: </span>
          <span>{{ item.updateTime }}</span>
        </div>
        <div class="desc">
          <jm-icon class="icon"><Monitor /></jm-icon>
          <span class="desc-title">操作系统: </span>
          <span>{{ item.os }}</span>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <div class="tags">
            <div class="tag pointer">{{ item.port }}</div>
            <div class="tag pointer">{{ item.protocol }}</div>
          </div>
        </div>
        <div class="preview">
          <span class="previews" v-html="modifyString(item.banner)" ></span>  
        </div>
      </div>
    </div>
  </div>
  <div class="jm-bg-color">
    <jmp-pagination
      v-model:page="leftList1.pageNum"
      v-model:limit="leftList1.pageSize"
      v-model:total="leftList1.length"
    />
  </div>
</template>

<script lang="ts" setup>
import {
  getSearchNetwork
} from '@/api/search/index'
import type { AxiosResponse } from 'axios'
import { onMounted,ref,onUnmounted } from 'vue'
import {
  Location,
  Aim,
  Clock,
  Monitor,
} from '@element-plus/icons-vue'
import { HttpCodeEnum } from '@packages/share/enums'

const props = defineProps({
  id: {
    type: String,
    required: true,
    default: () => {}
  }
})
console.log(props.id)
const leftList1: any = ref([])
const getSearch24Network = () => {
  getSearchNetwork(props.id).then((res: AxiosResponse) => {
    const { code, rows } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      leftList1.value = rows
    }
  })
}
console.log(leftList1)
const modifyString = (data: string) => {
  return data.replace(/^["<br> \n\r]+|["\n\r]+$/g,'').replace(/^\\n/g,'').replace(/(?:\\r\\n|\\r|\\n)+/g,'<br>')
};
onMounted(()=>{
  getSearch24Network()
})
onUnmounted(()=>{
  window.location.reload()
})
</script>

<style scoped lang="scss">
.color{
  color:#444;
}
.pointer {
  cursor: pointer;
  font-size: 1.25rem;
  margin-right: 0.625rem;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.result {
  padding: 1.25rem 1.25rem;
  align-items: center;
  height: 3.75rem;
  color: var(--el-color-primary);
  margin-bottom: 0.625rem;
}

.ip-item {
  display: flex;
  padding: 0.625rem 1.25rem;
  margin-bottom: 0.625rem;
  cursor: pointer;
  .left {
    border-right: var(--el-border);
    width: 25%;
    .title {
      margin-bottom: 1.25rem;
      span {
        font-size: 1.4rem;
        font-weight: 700;
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
    .desc {
      display: flex;
      align-items: center;
      margin-bottom: 0.9375rem;
      .icon {
        font-size: 1.425rem;
        color: var(--el-color-primary);
        font-weight: 700;
        margin-right: 0.3125rem;
      }
      .desc-title {
        font-size: 0.925rem;
        font-weight: 700;
        margin-right: 0.625rem;
        color:rgb(77, 80, 86);
      }
    }
  }
  .right {
    width: 75%;
    display: flex;
    flex-direction: column;
    flex: 1;
    .header {
      display: flex;
      justify-content: space-between;
      border-bottom: var(--el-border);
      padding: 0 3.125rem 0.625rem 0.625rem;
      .tags {
        display: flex;
        .tag {
          margin-right: 1.25rem;
          padding: 0.3125rem 0.625rem;
          color: #fff;
          background-color: var(--el-color-primary);
          font-weight: 700;
          font-size: 1.125rem;
        }
        
      }
    }
    .preview {
      position: relative;
      flex: 1;
      margin-top: 0.625rem;
      margin-left: 0.625rem;
      padding: 0.625rem;
      background-color: var(--el-color-primary-light-8);
      line-height: 1.5;
      color: var(--el-text-color-secondary);
      max-height: 11.875rem;
      max-width: 95rem;
      overflow-y: scroll;
      &::-webkit-scrollbar-track-piece {
        background-color: var(--el-fill-color-blank);
      }
      &::-webkit-scrollbar {
        width: 0.375rem;
        width: 0.375rem;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 1.25rem;
        background-color: var(--el-text-color-disabled);
      }
    }
  }
}
</style>